<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search">
				<view  class="search-icon"> <image src='../../../static/搜索.png' class="img" type="search" @tap="search"></image></view>
				<input class="search-input" type="text" placeholder="请输入关键字" v-model="keyword" @input="onInputChange" />
				<view  class="search-icon"> <image src='../../../static/bj关闭.png' class="img" v-if="keyword" type="clear"  @tap="onClear"></image></view>
		</view>
	</view>
	<!--中间的内容-->
	<!-- 左边选项卡 -->
	<view class="container">
	  <view class="sidebar">
	    <view
	      v-for="(option, index) in options"
	      :key="index"
	      class="sidebar-option"
	      :class="currentTab === index ? color[index] : ''"
	      @click="changeTab(index)"
	    >
			<!-- :class="currentTab === index ? 'active' : ''" -->
	      {{ option }}
			</view>
		</view>
		<!-- 右边内容 -->
	  <view class="content">
			<view class="content1" :class="color[currentTab]" v-show="showRight">
				<image :src="selectedOption.image" class="image" />
					<view class="description">
						<text>{{ selectedOption.description }}</text><br>
						<text>{{ selectedOption.text }}</text>
					</view>
			</view>
	    <view class="card-container">
	      <view
	        v-for="(card, index) in selectedOption.cards"
	        :key="index"
	        class="card"
	      >
	        <text>{{ card.title }}</text>
					<view class="card-right" :style="{ backgroundColor: card.color }">
						<text>{{ card.subtitle }}</text>
					</view>
	      </view>
	    </view>
	  </view>
	</view>

	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      keyword: '',//搜索框
				options: ['可回收物', '有害垃圾', '厨余垃圾', '其他垃圾'],//四种垃圾类型
				color:["colorone","colortwo","colorthree","colorfour"],//四种颜色
				currentTab: 0,//点击左边选项的哪几个
				selectedOption: {//右边内容的各种
				  image: '',
				  description: '',
					text:'',
					bgcolor:'',
				  cards: []//右边内容卡片
				},
				showRight:true,//控制搜索时的右边上面的介绍组件
				listData:[],//请求到的所有数据
				
	    };
	  },
		mounted() {
			
		  this.updateSelectedOption();
			
		},
		onLoad(){
			
		},
	  methods: {
	    onInputChange() {
	      // 输入框内容变化时的逻辑
	    },
	    onClear() {
	      // 清空搜索框的逻辑
	      this.keyword = '';
	    },
			changeTab(index) {
			  this.currentTab = index;
			  this.updateSelectedOption();
				this.showRight = true;
				
			},
			search() {
			  // 执行搜索逻辑，通过 filter() 方法过滤数据
				this.showRight = false ;
			  this.searchResult = this.selectedOption.cards.filter(card => card.title.includes(this.keyword))
			},
			updateSelectedOption() {
			  // 根据选项更新selectedOption的值
				uni.request({
				  url: 'http://43.136.172.73/api/v1/category/list',
				  method: 'GET',
					header: {
					  'Authorization': '' 
					},
				  success: (res) => {
						console.log(res);
						this.listData = res.data;
						console.log(this.listData);
						
						const newData = this.listData.map(item => ({
						  title: item.category,
						  subtitle: item.type,
						  color: '#3586FC' // 新增的color属性默认为 #000
						}));
						console.log(newData);
						this.selectedOption.cards.push(...newData);
						console.log(this.selectedOption);
				  },
				  fail: (err) => {
				    console.error(err);
				  },
				});
				
			  switch (this.currentTab) {
			    case 0:
			      this.selectedOption = {
			        image: '../../../static/011.png',
			        description: '可回收物:',
							text:'是指废纸张，废塑料，废玻璃制品，废金属，废织物等适宜回收，可循环利用的生物废弃物。',
							bgcolor:'#3586FC',
			        cards: [
			          { title: '卡片1', subtitle: '可回收物', color: '#3586FC' },
			          { title: '卡片2', subtitle: '可回收物', color: '#3586FC' }
			        ]
			      };
			      break;
			    case 1:
			      this.selectedOption = {
			        image: '../../../static/022.png',
			        description: '有害垃圾:',
							text:'是指废电池，废灯管，废药品，废油漆及其容器等对人体健康或者自然环境造成直接或者潜在危险的生活废弃物',
							bgcolor:'',
			        cards: [
			          { title: '卡片3', subtitle: '有害垃圾', color: '#FE0138' },
			          { title: '卡片4', subtitle: '有害垃圾', color: '#FE0138' }
			        ]
			      };
			      break;
			    case 2:
			      this.selectedOption = {
			        image: '../../../static/033.png',
			        description: '厨余垃圾:',
							text:'是指食材废料，剩菜剩饭，过期饰品，瓜皮果壳，花卉绿植，中药药渣等易腐败的生活物质生活废弃物。',
							bgcolor:'',
			        cards: [
			          { title: '卡片5', subtitle: '厨余垃圾', color: '#9ED26E' },
			          { title: '卡片6', subtitle: '厨余垃圾', color: '#9ED26E' }
			        ]
			      };
			      break;
			    case 3:
			      this.selectedOption = {
			        image: '../../../static/044.png',
			        description: '其他垃圾:',
							text:'即指除可回收物，有害垃圾，湿垃圾以外的其他生活废弃物',
							bgcolor:'',
			        cards: [
			          { title: '卡片7', subtitle: '其他垃圾', color: '#A4A8B4' },
			          { title: '卡片8', subtitle: '其他垃圾', color: '#A4A8B4' }
			        ]
			      };
			      break;
			    default:break;
			  }
			}
	  }
	}

</script>

<style lang="scss">



.search-container {
  display: flex;
  align-items: center;
  padding: 10px;
	width: 100%;
	height: 100rpx;
  background-color: #f5f5f5;
	position:fixed;
	z-index:9999;
	
	.search{
	display: flex;
	width: 670rpx;
	line-height: 30px;
	padding: 0 10px;
	margin: 0 15px;
	border: 1px solid #ccc;
	border-radius: 20px;
	background-color: #fff;
	
	.search-icon {
		width: 30rpx;
		height: 30rpx;
		margin-top: 5rpx;
		color: #ccc;
		
		.img{
			width: 30rpx;
			height: 30rpx;
		}
	}

	.search-input {
		flex: 1;
		height: 30px;
		width: 590rpx;
		line-height: 30px;
		padding: 0 10px;
		border-radius: 5px;
		// background-color: #fff;
	}

	
}
}

	
	.container {
	  display: flex;
		height: 189vh;
		z-index:9999;
		
		.sidebar {
	  display: flex;
		position:fixed;
	  flex-direction: column;
		margin-top:98rpx;
		height: 98vh;
		width: 210rpx;
	  background-color: #F2F2F2;
	  padding: 20rpx;
	}
	
	.sidebar-option {
	  padding: 20rpx;
		padding-bottom: 40rpx;
		font-size: 30rpx;
		// height:60rpx;
	  cursor: pointer;
	}
	
	.sidebar-option .active {
	  background-color: #CCCCCC;
	}
	
}
	
	
	.content {
	  flex-grow: 1;
	  // padding: 20px;
		height: 1000px;
		margin-top:102rpx;
		margin-left:210rpx;
	  // background-color: #5500ff;
		text-align: center;
		vertical-align: middle;
		
		.content1{
			width: 100%;
			height: 50%;
			// background-color: #B7D3E9;
			
			.image {
			width: 380rpx;
			height: 600rpx;
			margin-top:10px;
			margin-bottom: 10px;
		}
		
	}
	
	.description {
		padding-left:20px;
	  margin-bottom: 10px;
	}
	
	.card-container {
	  display: flex;
		background-color: #f2f2f2;
		flex-direction: column;
		width: 100%;
	}
	
	.card {
	  flex: 1;
	  padding: 10px;
	  color: #222;
		display: flex;
		border-bottom:2px solid #aaa;
		justify-content: space-between;
		
		.card-right{
			color: white;
			padding:3px;
			border-radius:10px;
		}
	}


}
	
	.colorone{
		background-color: #B7D3E9;
	}
	.colortwo{
		background-color: #F6C3BF;
	}
	.colorthree{
		background-color: #D9D2CC;
	}
	.colorfour{
		background-color: #C2C2C2;
	}





</style>
